<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/layout/layout_nav_footer.xhtml">
	<ui:define name="titre">
		<p:graphicImage value="/img/recettes.png" />
	</ui:define>
	<ui:define name="content">
		<h:form id="form">  
		  
		    <p:dataGrid var="rec" value="#{searchRecipe.foundRecipes}" columns="2"  rows="4" paginator="true"  
		        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">  
		        <p:panel>
		        	<div>
		        		<div class="cookCar">
			        		<ul>
			        			<li>
					        		<p:graphicImage value="#{searchRecipe.imgNbOfPerson}"/>
			            			<h:outputText value="#{rec.nbPersons} " /> personnes
		            			</li>
			            		
			            		<li>
			            			<p:graphicImage value="#{searchRecipe.imgCookExpertise}"/>
					            	<p:rating value="#{rec.cookExpertise}" readonly="true" />
				            	</li>
					            
					            <li>
					            	<p:graphicImage value="#{searchRecipe.imgPreparationDuration}"/>
						            <h:outputText value="#{rec.preparationDuration} " />mn
					            </li>
						        
						        <li>
						            <p:graphicImage value="#{searchRecipe.imgCookType}"/>
				           			<h:outputText value="#{rec.cookType}" />
			           			</li>
		           			</ul>
			        	</div>
			        	<div class="cookSum" style="height: 177px;overflow: hidden;">
			        		<h3>
			           			<h:commandLink action="recipeDetails.jsf" value="#{rec.title}">
									<f:setPropertyActionListener target="#{searchRecipe.selectedRecipe}" value="#{rec}" />
								</h:commandLink>
							</h3>
							<p>
								<h:outputText value="#{rec.sumUp}" />
							</p>
						</div>
			        	<div style="clear:both"></div>
			        </div>            		
		        </p:panel>  
		    </p:dataGrid>
		  
		</h:form>
	</ui:define>
</ui:composition>